<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<!-- <view>Back</view> -->
			<view class="backicon"></view>
		</view>
		<view class="title">
			<text>反馈与建议</text>
		</view>
		<view class="Suggesttext">
			<view class="nm" style="margin-top: 30rpx;">
				<text>*问题说明</text>
			</view>

			<view style="margin-top: 30rpx; width: 90%;margin-left: 5%;">
				<u--textarea v-model="suggesttext" placeholder="请你详细描述问题, 不多于200个字" placeholderStyle="color: red;"
					disableDefaultPadding border="bottom" count showConfirmBar maxlength=200 autoHeight></u--textarea>
			</view>
			<view style="margin-top: 20rpx;padding-bottom: 20rpx;float: right;margin-right: 5%;">
			</view>
		</view>
		<view class="uploadfile">
			<text class="zj">*上传证据</text>
			<view style="margin-left: 40rpx;">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="3"
					:previewFullImage="true"></u-upload>
			</view>
			<view class="nm">
				<text>开启匿名</text>
			</view>
			<view style="float: right;margin-top: -50rpx;margin-right: 20rpx;">
				<!-- <u-switch size="20" v-model="noname" @change="change"></u-switch>-->
				<switch style="transform:scale(0.8)" color="#0055ff" @change="change"></switch>

			</view>
		</view>
		<view class="ts">
			<text>*为必填项,证据最多上传3张</text>
		</view>
		<view style="margin-top: 10rpx;">
			<u-button text="提交" @click="CommitSuggest"
				color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle" size="large"
				customStyle="width: 650rpx"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		HNIT_URL, USERNAME
	} from "@/constants/index.js";
	import {
		data
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				suggesttext: "", // 投诉内容
				noname: false, // true 为启用匿名 false为实名
				fileList1: [], // 证明材料
				state: 0, // 匿名状态
				fileurllist: [], // 存放文件的url
				newfilepath: [], // 存放上传成功后返回的文件新路径
			}
		},
		methods: {
			// 返回上一页
			back() {
				uni.reLaunch({
					url: '/pages/student/home/index'
				});
			},
			// 提交
			CommitSuggest() {
				// 设置匿名状态
				if (this.noname == false) {
					this.state = 0
				} else {
					this.state = 1
				}
				// 获取缓存中的学生id
				var stuid = uni.getStorageSync(USERNAME);
				// 上传证据照片
				for (let i = 0; i < this.fileurllist.length; i++) {
					const result = this.uploadFilePromise(this.fileurllist[i])
				}
				wx.showToast({
				      title: '上传中', //提示的内容
				      duration: 4000, //持续的时间
				      icon: 'loading', 
				      mask: true //显示透明蒙层 防止触摸穿透
				    })
				setTimeout(() => {
					// 请求参数
					let params = {
						stuid: stuid,
						description: this.suggesttext,
						state: this.state,
						newFilePath: this.newfilepath+","
					}
					// 发起请求
					this.$request.post(HNIT_URL + "wx/InsertFeedbackAll", params).then(res => {
						if(res.msg == "上传成功"){
							uni.showToast({
								title: res.msg
							})
						}else{
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
						
					})
					this.suggesttext = ""
					this.fileList1=[]
					this.fileurllist=[]
					this.newfilepath=[]
					this.deletePic
				}, 1000)
				
				
			},
			// 删除上传的图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileurllist[event.index] = ""
			},
			// 新增图片
			async afterRead(event) {

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length

				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'success',
					})
				})

				for (let i = 0; i < lists.length; i++) {
					this.fileurllist.unshift(lists[i].url)
				}
			},
			// 照片上传
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HNIT_URL + "wx/upload", // 后端api接口
						filePath: url, // uni.chooseImage函数调用后获取的本地文件路劲
						name: 'file', //后端通过'file'获取上传的文件对象
						header: {
							"Content-Type": "multipart/form-data"
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							this.newfilepath.push(data.data)
							resolve(res.data)	
						}
					});
				})
			},
			checkboxChange(n) {

			},
			change(e) {
				this.noname = !this.noname;
			},
		}
	}
</script>

<style>
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}

	.ts {
		margin-top: 20rpx;
		margin-left: 530rpx;
		width: 90%;
		color: #595959;
	}

	.nm {
		font-family: FZSuXSLSJW;
		color: #595959;
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
	}

	.zj {
		color: #595959;
		line-height: 100rpx;
		font-family: FZSuXSLSJW;
		font-size: 36rpx;
		margin-left: 40rpx;
	}

	.uploadfile {
		margin-top: 40rpx;
		border-radius: 30rpx;
		width: 90%;
		background-color: white;
		height: 380rpx;
	}

	page {
		background-color: #eeeeee;
	}

	.Suggesttext {
		width: 90%;
		background-color: white;
		margin-top: 40rpx;
		border-radius: 30rpx;
	}

	.title {
		margin-top: -60rpx;
		font-family: FZSuXSLSJW;
		font-size: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>